Framer Motion — Animation Hooks

With the Framer Motion library, we can render animations in our React app easily.

In this article, we’ll take a look at how to get started with Framer Motion.

useMotionTemplate

We can use the useMotionTemplate hook to combine multiple motion values into one using a template string literal.

For example, we can write:

import React from "react";
import {
  motion,
  useSpring,
  useMotionValue,
  useMotionTemplate
} from "framer-motion";

export default function App() {
  const shadowX = useSpring(10);
  const shadowY = useMotionValue(10);
  const shadow = useMotionTemplate`drop-shadow(${shadowX}px ${shadowY}px 20px rgba(0,0,0,0.3))`;

  return (
    <>
      <motion.div
        style={{
          filter: shadow,
          width: 100,
          height: 100,
          backgroundColor: "red"
        }}
      ></motion.div>
    </>
  );
}

to combine the shadowX and shadowY motion values by using the useMotionTenmplate tag.

We pass in the shadowX and shadowY values to create the drop shadow effect.

And we pass that into the style prop.

useTransform

The useTransform hook lets us create a motion value that transforms the output of another motion value with a function.

For example, we can write:

import React from "react";
import { motion, useMotionValue, useTransform } from "framer-motion";

export default function App() {
  const x = useMotionValue(10);
  const y = useTransform(x, (value) => value * 2);

  return (
    <motion.div
      style={{ x, y, width: 100, height: 100, backgroundColor: "red" }}
    />
  );
}

We create the x motion value with the useMotionValue hook.

Then we call the useTransform hook with the x motion value and a function to return a value for the y motion value.

Then we pass them both into the style prop to position the div.

We can use it to return a range of values.

To do this, we write:

import React from "react";
import { motion, useMotionValue, useTransform } from "framer-motion";

export default function App() {
  const x = useMotionValue(0);
  const xRange = [-200, -100, 100, 200];
  const opacityRange = [0, 1, 1, 0];
  const opacity = useTransform(x, xRange, opacityRange);

  return (
    <motion.div
      animate={{ x: 200 }}
      style={{ opacity, x, width: 100, height: 100, backgroundColor: "red" }}
    />
  );
}

We create the xRange array to use it to map to the values of opacityRange .

If x is -200, then opacity is 0. If x is -100, then opacity is 1, and so on.

We then use that to render the div with the position given by the x and y values.

The opacity is set to the value of the div.

useSpring

The useSpring hook lets us create a motion value that when it’s set, will use a spring animation to animate to its new state.

For example, we can write:

import React from "react";
import { motion, useSpring } from "framer-motion";

export default function App() {
  const x = useSpring(0, { stiffness: 300 });
  const y = useSpring(x, { damping: 10 });

  return (
    <motion.div
      animate={{ x: 200, y: 100 }}
      style={{ x, y, width: 100, height: 100, backgroundColor: "red" }}
    />
  );
}

We call useSpring to create the x motion value to create the spring effect.

stiffness is the stiffness coefficient. Higher stiffness decreases the number of oscillations.

damping is the ratio to reduce the magnitude of the oscillation.

We use the x and y values to animate the position of the div.

Conclusion

We can use various hooks provided by Framer Motion to animate our elements.